★ 村落裡某條街上 ↓↓↓

顯示商店位置圖

(*ﾟーﾟ)：
為何對「inline」設定寬度與高度，
卻又能正常顯示？

：不解的追問。

閱讀前，建議先向 鉄人2号「文本士」收集資料，此章為初探村落續文。

商店老闆 [置換象]：
在 CSS 中，置換元素是其表示超出 CSS 範圍的元素，它們是外聯對象，表示獨立於 CSS 格式化模型。換句話說，對象不受當前文檔樣式的影響。

而使用 CSS 樣式屬性是可以影響置換元素的位置 (例 vertical-align)，但不會改變置換元素本身的內容。

：怎麼突然換了人？

：你儘管認真收集資料就行。(
大聲制止樣！！)

：最怕空氣突然安靜。。。
歌魂～～）

：最高品質靜悄悄。蹲～ 痾！ )

★★★ 關卡條件 ↓↓↓

置換元素（Replaced elements）

• HTML 只定義置換元素。
• 在 CSS 規範中，只有「置換元素」的一般特徵概念，因 HTML 的發展相當獨立於 CSS。
• 基本外聯崁入皆是置換元素。透過演變置換變成未置換 (概念隨著時間的推移有所改變)。

未置換元素

• W3C「未置換元素」泛指任何既不是置換元素但又是行內元素。
• 「未置換元素」只是一個單純被渲染元素，並不是讓一些外部對象出現在它的位置。

Σ(ﾟдﾟ) ★ 踢到小碎石
某些置換元素具有內部維度（Intrinsic dimension）或已定義的基準線。

HTML 定義

嵌入內容 (Embedded content)：
<iframe>、<video> 和 <embed> 等，以及條件符合情況下，才被視為置換元素：<audio>、<canvas> 和 <object> 等。

而針對圖像主要又細分為 2 種：<img> 和 <input type="image">。
瀏覽器主要按照下方幾種規則來渲染這兩種元素：

• 展示圖像：瀏覽器將認為該元素是「置換元素」。
• 不展示圖像，但該元素卻包含內部維度：
  • 瀏覽器認為此元素將來或在適當的時候被渲染。
  • 元素沒有帶有 alt 屬性。
  • 當前文檔處於怪異模式 (quirks mode)。
• 當 <img> 為純文本並且瀏覽器不希望其發生改變，該元素被看做是「未置換元素」。
• 當 <img> 為空時，並且瀏覽器不希望其發生改變，該元素被看做是空元素。
• 當 <input> 不展示圖像並且瀏覽器不希望其發生改變，該元素被看做是 「置換元素」。

註：未置換元素 尚未有明確解析。

CSS 定義

置換元素

• 內容超出 CSS 格式模型範圍的元素 (例圖像、嵌入文檔或應用程式)。
• <img> 帶有其 src 屬性。
• 具有內在維度 (固有寬度，固有高度和固有縱橫比率)。
• 點陣圖具有以絕對單位指定的固有寬度和固有高度。
• 如有將敏感信息洩露給第三方疑慮，則瀏覽器可認定置換元素不具有任何內在維度。
• CSS 渲染中不考慮置換元素的內容。

(๑• . •๑) ↓↓↓
圍籬旁老人喃喃自語聲～～
目光吸引中 )

內在維度（intrinsic dimensions）

• 由元素本身定義的寬度和高度，不是由周圍環境強加的。
• CSS 沒有定義如何找到內在維度。
• 在 CSS 中，只有置換元素才能具有內在維度。
• 對於沒有可靠分辨率信息的圖像，必須假設每個圖像來源像素為 1 像素單位。

(゜皿。) 努力解讀中 )：

• 內在維度代表為首選或自然尺寸，也就意味著和上下文 (context) 無關。
• 任何兩個內在維度都自動定義第三個維度。 (皆具有 auto 計算其值)
• <button> 標籤沒有內在維度，純為一般行內元素。

村長：
喀喀！！(咳嗽聲)
果然鄉民都比你厲害。

：思緒中斷。 ）

如果搜集完各種資料，
村外西南方一公里處，有一座小樹林，
拿著 (遞出紙條)，
到附近去找些可用材料回來吧。

(ヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)ﾉ）

噢！！是的
準備離開新手村。(
咯咯聲 )

[ 追加經驗值 ]
註：參考來源 visual formatting model details
深入前端之 replaced element
Is button a replaced element or not?